<template>
  <div>
   <el-cascader @change="changeaddress"  clearable v-model="code" :options="options" :placeholder="name" :style="{width:this.w || '250px'}"></el-cascader>
  </div>
</template>

<script>
    import {tongyidizhi} from '../assets/tongyidiqu.js'
  export default {
    name: 'tongyidizhi',
    props:['cengshu','sheng','shi','qu','name','w'],
    data() {
      return {
        options:"",
        code:[],

        sheng:"",
        shi:"",
        qu:"",
        shengcode:"",
        shicode:"",
        qucode:"",

        cs:1,

      }
    },
    created() {
      console.log(this.name)
      if(this.cengshu){
        this.cs = this.cengshu
      }
      //两层地址
      if(this.cs == 1){
        tongyidizhi.forEach(item=>{
          item.children = ""
        })
      }
      if(this.cs == 2){
        tongyidizhi.forEach(item=>{
          if(item.children){
            item.children.forEach(item2=>{
              item2.children = ""
            })
          }
        })
      }
      if(this.cs == 3){
        tongyidizhi.forEach(item=>{
          if(item.children){
            item.children.forEach(item2=>{

              if(item2.children){
                item2.children.forEach(item3=>{
                  item3.children = ""
                })
              }
            })
          }
        })
      }

      this.options = tongyidizhi

      this.chushihua()
    },

    methods: {
      chushihua:function(){
        this.options.forEach((item1,index)=>{
          if(item1.label == this.sheng){
            this.code[0] = item1.value
          }
          if(this.cs == 2 || this.cs == 3){
            item1.children.forEach(item2=>{
              if(item2.label == this.shi){
                this.code[1] = item2.value
              }
              if(this.cs == 3){
                item2.children.forEach(item3=>{
                  if(item3.label == this.qu){
                    this.code[2] = item3.value
                  }
                })
              }
            })
          }
        })
      },
      changeaddress:function(val){
        if(val != ''){
          //省
          this.options.forEach((item1,index)=>{
            if(item1.value == val[0]){
              this.sheng = item1.label
              this.shengcode = item1.value
              //市
              if(this.cs == 2 || this.cs == 3){
                item1.children.forEach(item2=>{
                  if(item2.value == val[1]){
                    console.log(item2)
                    this.shi = item2.label
                    this.shicode = item2.value
                    //区
                    if(this.cs == 3){
                      item2.children.forEach(item3=>{
                        if(item3.value == val[2]){
                          this.qu = item3.label
                          this.qucode = item3.value
                        }
                      })
                    }

                  }
                })
              }

            }
          })
        }else{
          this.sheng = ""
          this.shi = ""
          this.qu = ""
          this.shengcode = ""
          this.shicode = ""
          this.qucode = ""
        }

        let obj = {
          sheng:this.sheng,
          shi:this.shi,
          qu:this.qu,
          shengcode:this.shengcode,
          shicode:this.shicode,
          qucode:this.qucode
        }
        this.$emit('chuandizhi',obj)
      }
    }
  }
</script>


<style lang="less" scoped>

</style>
